<template>
  <div class="mine-page-3 bg-background" :style="{ overflow: 'auto' }">
    <!-- Legal -->
    <MineLegalCP v-if="isAboutCP" @to-page="toPage"></MineLegalCP>
    <MineLegalDMCA v-else-if="isAboutDMCA" @to-page="toPage"></MineLegalDMCA>
    <MineLegalPD v-else-if="isAboutPD" @to-page="toPage"></MineLegalPD>
    <MineLegalPP v-else-if="isAboutPP" @to-page="toPage"></MineLegalPP>
    <MineLegalSitemap v-else-if="isAboutSitemap" @to-page="toPage"></MineLegalSitemap>
    <MineLegalTOS v-else-if="isAboutTOS" @to-page="toPage"></MineLegalTOS>
    <MineLegalUscStmt v-else-if="isAboutUscStmt" @to-page="toPage"></MineLegalUscStmt>

    <!-- Earn -->
    <MineEarnWdrlHist v-else-if="isEarnWdrlHist" @to-page="toPage"></MineEarnWdrlHist>
    <MineEarnWdrlReq v-else-if="isEarnWdrlReq" @to-page="toPage"></MineEarnWdrlReq>
    <KycVerify v-else-if="isKycVerify" @to-page="toPage"></KycVerify>
    <MineEarnRevDtl v-else-if="isEarnRevDtl" @to-page="toPage"></MineEarnRevDtl>

    <!-- Profile -->
    <MineProfilePrvw v-else-if="isProfilePrvw" @to-page="toPage"></MineProfilePrvw>
    <MineProfileSet v-else-if="isProfileSet" @to-page="toPage"></MineProfileSet>

    <!-- FanSendSet -->
    <MineSelectMedia v-else-if="isSelectMedia" @to-page="toPage"></MineSelectMedia>

    <!-- Setting -->
    <MineSetUser v-else-if="isSetUser" @to-page="toPage"></MineSetUser>
    <MineSetPw v-else-if="isSetPw" @to-page="toPage"></MineSetPw>
    <MineSetGender v-else-if="isSetGender" @to-page="toPage"></MineSetGender>
    <MineSetBlkAcc v-else-if="isSetBlkAcc" @to-page="toPage"></MineSetBlkAcc>
    <MineSetDelAcc v-else-if="isSetDelAcc" @to-page="toPage"></MineSetDelAcc>
    <MineSetMailVerify v-else-if="isSetMailVerify" @to-page="toPage"></MineSetMailVerify>
    <MineSetNtfyLetter v-else-if="isSetNtfyLetter" @to-page="toPage"></MineSetNtfyLetter>

    <!-- Become Creator -->
    <BecomeCreator v-else-if="isBecomeCreator" @to-page="toPage"></BecomeCreator>

    <!-- Following Creator -->
    <MineAnotherCreator
      v-else-if="isAnotherCreator"
      :id="params[0]"
      :username="params[1]"
      :prev-page-name="params[2]"
      @to-page="toPage"
    ></MineAnotherCreator>

    <!-- Credit Card -->
    <MineCreditCard v-else-if="isCreditCard" @to-page="toPage"></MineCreditCard>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'

// mineLegal
const MineLegalCP = defineAsyncComponent(() => import('./mineLegal/MineLegalCP.vue'))
const MineLegalDMCA = defineAsyncComponent(() => import('./mineLegal/MineLegalDMCA.vue'))
const MineLegalPD = defineAsyncComponent(() => import('./mineLegal/MineLegalPD.vue'))
const MineLegalPP = defineAsyncComponent(() => import('./mineLegal/MineLegalPP.vue'))
const MineLegalSitemap = defineAsyncComponent(() => import('./mineLegal/MineLegalSitemap.vue'))
const MineLegalTOS = defineAsyncComponent(() => import('./mineLegal/MineLegalTOS.vue'))
const MineLegalUscStmt = defineAsyncComponent(() => import('./mineLegal/MineLegalUscStmt.vue'))

// mineEarn
const MineEarnWdrlHist = defineAsyncComponent(() => import('./mineEarn/MineEarnWdrlHist.vue'))
const MineEarnWdrlReq = defineAsyncComponent(() => import('./mineEarn/MineEarnWdrlReq.vue'))
const KycVerify = defineAsyncComponent(() => import('./mineEarn/KycVerify.vue'))
const MineEarnRevDtl = defineAsyncComponent(() => import('./mineEarn/MineEarnRevDtl.vue'))

// mineProfile
const MineProfilePrvw = defineAsyncComponent(() => import('./mineProfile/MineProfilePrvw.vue'))
const MineProfileSet = defineAsyncComponent(() => import('./mineProfile/MineProfileSet.vue'))

// mineFanSendSet
const MineSelectMedia = defineAsyncComponent(() => import('./mineFanSendSet/mineSelectMedia.vue'))

// mineSet
const MineSetUser = defineAsyncComponent(() => import('./mineSet/MineSetUser.vue'))
const MineSetPw = defineAsyncComponent(() => import('./mineSet/MineSetPw.vue'))
const MineSetGender = defineAsyncComponent(() => import('./mineSet/MineSetGender.vue'))
const MineSetBlkAcc = defineAsyncComponent(() => import('./mineSet/MineSetBlkAcc.vue'))
const MineSetDelAcc = defineAsyncComponent(() => import('./mineSet/MineSetDelAcc.vue'))
const MineSetMailVerify = defineAsyncComponent(() => import('./mineSet/MineSetMailVerify.vue'))
const MineSetNtfyLetter = defineAsyncComponent(() => import('./mineSet/MineSetNtfyLetter.vue'))

// become creator
const BecomeCreator = defineAsyncComponent(() => import('./becomeCreator/index.vue'))

const MineAnotherCreator = defineAsyncComponent(() => import('./MineAnotherCreator.vue'))

// credit card
const MineCreditCard = defineAsyncComponent(() => import('./minePur/MineCreditCard.vue'))

const props = defineProps({
  name: { type: String, required: true },
  params: { type: Array },
})

const emits = defineEmits(['toPage'])

const isAboutTOS = computed(() => props.name === `terms-of-service`)
const isAboutPP = computed(() => props.name === `privacy-policy`)
const isAboutCP = computed(() => props.name === `cookie-policy`)
const isAboutDMCA = computed(() => props.name === `dmca`)
const isAboutSitemap = computed(() => props.name === `sitemap`)
const isAboutPD = computed(() => props.name === `personal-data`)
const isAboutUscStmt = computed(() => props.name === `usc-statement`)

const isEarnWdrlHist = computed(() => props.name === `withdrawal-history`)
const isEarnWdrlReq = computed(() => props.name === `withdrawal-request`)
const isKycVerify = computed(() => props.name === `kyc-verify`)
const isEarnRevDtl = computed(() => props.name === `revenue-details`)

const isProfilePrvw = computed(() => props.name === `preview`)
const isProfileSet = computed(() => props.name === `settings`)

const isSelectMedia = computed(() => props.name === `select-media`)

const isSetUser = computed(() => props.name === `username-email`)
const isSetPw = computed(() => props.name === `password`)
const isSetGender = computed(() => props.name === `gender-preferences`)
const isSetBlkAcc = computed(() => props.name === `blocked-accounts`)
const isSetDelAcc = computed(() => props.name === `delete-account`)
const isSetMailVerify = computed(() => props.name === `mail-verify`)
const isSetNtfyLetter = computed(() => props.name === `notify-letter`)
const isBecomeCreator = computed(() => props.name === `become-creator`)

const isAnotherCreator = computed(() => props.name === `another-creator`)

const isCreditCard = computed(() => props.name === `credit-card`)

function toPage(page, name) {
  emits('toPage', page, name)
}
</script>

<style lang="scss" scoped>
.mine-page-3 {
  width: 100%;
  height: 100%;
}
</style>
